<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Gridのカラムを自動フィットさせる</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all-debug.js"> </script>

    <script type="text/javascript"><!--
      Ext.BLANK_IMAGE_URL = "http://extjs.cachefly.net/ext-3.1.1/resources/images/default/s.gif";
      Ext.onReady(function(){
        new Ext.Window({
          width: 500,
          height: 300,
          layout: 'fit', // gridをWindow内にフィットさせる
          items: [{
            xtype: 'grid',
            viewConfig: {
              forceFit: true  // カラムを自動的にフィットさせる 
            },
            store: {
              xtype: 'arraystore',
              data: [[1,2,3],[4,5,6],[7,8,9]],
              fields: "abc".split('') 
            },
            columns: [
              {dataIndex: 'a', header: 'a', width: 100},
              {dataIndex: 'b', header: 'b', width: 150},
              {dataIndex: 'c', header: 'c'} 
            ]
          }]
        }).show();
      });
    // --></script>
  </head>
  <body>
  </body>
</html>













